<template>
  <div class="second">
    <el-button type="primary" round plain size="small" @click="prev">返回上一步</el-button>
    <div v-if="listData">
      <div class="block-height marginT20">
        <div class="fl text-line-height">
          <div class="fl fs-14 line-height30">
            <el-tag v-if="listData.baseInfo.original">原创</el-tag>
            <el-tag v-else>转载</el-tag>
          </div>
          <div class="fl fs-22 fw line-height30 marginL10">{{ listData.baseInfo.title }}</div>
        </div>
        <div class="fr">
          <ul class="resList">
            <li
              v-for="(item, index) in listData.resList"
              :key="index"
              :class="index === programmeInx ? 'active' : ''"
              @click="switchingScheme(item, index)"
            >{{ item.TeachingDesignName }}方案</li>
          </ul>
        </div>
      </div>
      <div class="title">
        {{ listData.STAGE.itemName }}{{ listData.GRADE.itemName
        }}{{ listData.SUBJECT.itemName }}第{{ Number(classHourInx) + 1 }}课
      </div>
      <el-col :span="12">
        <div class="marginT30">
          <div class="title">栏目分类</div>
          <div class="marginT10">
            <el-cascader
              v-if="options.category && options.category.length > 0"
              v-model="listData.categorySelect"
              :options="options.category"
              style="width: 100%;"
              :props="{
                multiple: true,
                value: 'tagsId',
                label: 'tagsName',
                children: 'sub',
                checkStrictly: true
              }"
              clearable
            />
            <el-cascader
              v-else
              v-model="listData.categorySelect"
              placeholder="请选择"
              disabled
              style="width: 100%;"
              :props="{
                multiple: true,
                value: 'tagsId',
                label: 'tagsName',
                children: 'sub',
                checkStrictly: true
              }"
              clearable
            />
          </div>
        </div>

        <div class="marginT30">
          <div class="title">标签</div>
          <div class="marginT10">
            <el-cascader
              v-if="options.content && options.content.length > 0"
              v-model="listData.contentSelect"
              :options="options.content"
              placeholder="请选择"
              style="width: 100%;"
              :props="{
                multiple: true,
                value: 'tagsId',
                label: 'tagsName',
                children: 'sub',
                checkStrictly: true
              }"
              clearable
            />
            <el-cascader
              v-else
              v-model="listData.contentSelect"
              :options="options.content"
              disabled
              style="width: 100%;"
              :props="{
                multiple: true,
                value: 'tagsId',
                label: 'tagsName',
                children: 'sub',
                checkStrictly: true
              }"
              clearable
            />
          </div>
        </div>

        <div class="marginT30">
          <div class="title">备注</div>
          <div class="marginT10">
            <el-input
              v-model="listData.baseInfo.profiles"
              type="textarea"
              :rows="3"
              resize="none"
              placeholder="请输入备注内容"
            />
          </div>
        </div>
      </el-col>
      <!-- {{ '方案:' + programmeInx }}
      {{ '课时:' + classHourInx }}
      {{
      listData.resList[programmeInx].resList[classHourInx].resTeaching
      .editModel
      }}-->
      <el-col :span="24" class="marginT30" style="padding-bottom: 65px;">
        <el-tabs v-model="classHourInx" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item, index) in listData.resList[programmeInx].resList"
            :key="index"
            :label="'课时' + (index + 1)"
            :name="index + ''"
          >
            <el-tabs v-if="index == classHourInx" tab-position="left" style="height: auto;">
              <el-tab-pane label="教案">
                <div class="margin30">
                  <!-- <el-col :span="16">
                    <ul class="lessonPlan">
                      <li>在线word文档模式</li>
                      <li>标准模板</li>
                    </ul>
                  </el-col>-->
                  <el-col :span="24">
                    <lessonPlanCriterion
                      v-if="
                        options &&
                          listData.resList[programmeInx].resList[classHourInx]
                            .resTeaching.editModel === 'MODULE'
                      "
                      :list="listData"
                      :programme-inx="programmeInx"
                      :class-hour-inx="classHourInx"
                      :option="options"
                      @Callback="lessonPlanCallBack"
                    />
                    <lessonPlanWord
                      v-else
                      :list="listData"
                      :programme-inx="programmeInx"
                      :class-hour-inx="classHourInx"
                      :option="options"
                      @Callback="lessonPlanCallBack"
                    />
                  </el-col>
                </div>
              </el-tab-pane>
              <el-tab-pane label="课件">
                <div class="margin30">
                  <courseware
                    :list="listData"
                    :option="options"
                    :programme-inx="programmeInx"
                    :class-hour-inx="classHourInx"
                  />
                </div>
              </el-tab-pane>
              <el-tab-pane label="课堂实录">
                <div class="margin30">
                  <courseVideo
                    :list="listData"
                    :programme-inx="programmeInx"
                    :class-hour-inx="classHourInx"
                    :option="options"
                    @Callback="lessonPlanCallBack"
                  />
                </div>
              </el-tab-pane>
              <el-tab-pane label="教学反思">
                <div class="margin30">
                  <teachingReflection
                    :programme-inx="programmeInx"
                    :class-hour-inx="classHourInx"
                    :list="listData"
                  />
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>

        <!-- <div class="button-box">
          <div style="margin-left: 50%; transform: translateX(-40%)">
            <button class="default">保存</button>
            <button class="submit">发布</button>
          </div>
        </div>-->
      </el-col>
    </div>
  </div>
</template>

<script>
import { findColumnTags, findTagsList } from '@/api/content';
import lessonPlanWord from './components/lessonPlanWord';
import lessonPlanCriterion from './components/lessonPlanCriterion';
import courseware from './components/courseware';
import courseVideo from './components/courseVideo';
import teachingReflection from './components/teachingReflection';

import {
  reduceArr,
  assignment,
  compose,
  tagsObjSwitch,
  getParents
} from '@/utils/categoryOrTags';

export default {
  name: 'Second',
  components: {
    lessonPlanWord,
    lessonPlanCriterion,
    courseware,
    courseVideo,
    teachingReflection
  },
  props: ['list'],
  data () {
    return {
      tagsKindEnum: 'TEACHING_DESIGN',
      tagsTypeEnum: 'CATEGORY_TAGS',
      listData: this.list,

      programmeInx: 0, // 方案
      classHourInx: 0, // 课时
      options: {
        category: null, // 分类标签
        content: null // 内容标签
      }
    };
  },
  computed: {},
  watch: {},
  created () {
    console.log('步骤二');
    console.log('this.listData:', this.listData.baseInfo.categoryTagList);
    // console.log(findColumnTags);

    // var cateObj = {};
    // for (var i in this.listData.baseInfo.categoryTagList) {
    //   Object.assign(cateObj, this.listData.baseInfo.categoryTagList[i].tags);
    //   // cateArr = cateArr.concat(this.ruleForm.categoryTag[i].tags);
    // }
    // this.listData.newCategoryTag = tagsObjSwitch(cateObj);
    // this.listData.newColumnTag = tagsObjSwitch(
    //   this.listData.baseInfo.columnTag.tags
    // );

    // 课堂实录
    this.listData.resList.map(item => {
      if (this.checkArr(item.resList)) {
        item.resList.map(resItem => {
          resItem.resCourseVideo.fragmentsArr = resItem.resCourseVideo.fragments
            ? resItem.resCourseVideo.fragments.split(',')
            : '';
        });
      }
    });
    this.getSelection();
  },
  methods: {
    // 切换方案
    switchingScheme (item, index) {
      this.programmeInx = index;
      console.log('this.programmeInx:', this.programmeInx);
    },
    prev (formName) {
      this.list.step =
        this.list.baseInfo.typeRole === 'TRAINER' ? 'trainer' : 'teacher';
      this.$emit('Callback', this.list);
    },

    // 获取选项
    async getSelection () {
      if (
        this.listData.GROWTH_CLASSIFY.itemCode &&
        this.listData.STAGE.itemCode &&
        this.listData.SUBJECT.itemCode
      ) {
        await this.getFindColumnTags();
        await this.getFindTagsList();
      }
    },
    // 获取分类标签
    getFindColumnTags () {
      findColumnTags({
        growthClassify: this.listData.GROWTH_CLASSIFY.itemCode,
        stageId: this.listData.STAGE.itemCode,
        subjectId: this.listData.SUBJECT.itemCode
      }).then(res => {
        this.options.category = res.data;
        // 分类标签回显
        var category = [];
        var categorySelect = [];
        if (this.listData.baseInfo.categoryTagList && this.listData.baseInfo.categoryTagList.length > 0) {
          this.listData.baseInfo.categoryTagList.map(item => {
            category = category.concat(Object.keys(item.tags));
          });

          category.map(id => {
            if (getParents(this.options.category, id, 'tagsId').length > 0) {
              categorySelect.push(getParents(this.options.category, id, 'tagsId').reverse());
            }
          });
        }
        this.listData.categorySelect = categorySelect;
      });
    },

    // 获取标签
    getFindTagsList () {
      findTagsList({
        growthClassify: this.listData.GROWTH_CLASSIFY.itemCode,
        stageId: this.listData.STAGE.itemCode,
        subjectId: this.listData.SUBJECT.itemCode,
        tagsKindEnum: this.tagsKindEnum,
        tagsTypeEnum: this.tagsTypeEnum
      }).then(res => {
        console.log('标签:', res.data);
        // this.options.content = assignment(res.data);
        this.options.content = res.data;

        // 分类标签回显
        var content = [];
        var contentSelect = [];
        if (this.listData.baseInfo.columnTag !== undefined && JSON.stringify(this.listData.baseInfo.columnTag) !== '{}') {
          content = content.concat(Object.keys(this.listData.baseInfo.columnTag.tags));

          console.log('content:', content);
          content.map(id => {
            if (getParents(this.options.content, id, 'tagsId').length > 0) {
              contentSelect.push(getParents(this.options.content, id, 'tagsId').reverse());
            }
          });
        }
        console.log('contentSelect:', contentSelect);

        this.listData.contentSelect = contentSelect;

        console.log('this.listData:', this.listData);
      });
    },

    handleClick (tab, event) {
      // console.log(tab, event);
      console.log('当前tab索引:', tab.index, this.classHourInx);
      this.classHourInx = tab.index;
    },

    lessonPlanCallBack (data) {
      console.log('data:', data);
      this.listData = data;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-button {
  margin-left: 10px;
}
.block-height {
  height: 40px;
}
.text-line-height {
  line-height: 40px;
}

.resList {
  li {
    background-color: #e9f3fe;
    display: inline-block;
    height: 32px;
    padding: 0 10px;
    line-height: 30px;
    font-size: 12px;
    color: #1e87f0;
    border: 1px solid #d2e7fc;
    border-radius: 4px;
    cursor: pointer;
  }
  li.active {
    color: #fff;
    background-color: #1e87f0;
    border-color: #1e87f0;
  }
  li:not(:first-child) {
    margin-left: 10px;
  }
}

.button-box {
  margin-top: 24px;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background-color: white;
  padding: 15px 0;
  border-top: 1px solid #ccc;
  .default {
    width: 200px;
    height: 46px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    margin-right: 30px;
    cursor: pointer;
  }
  .submit {
    width: 200px;
    height: 46px;
    border: none;
    background: rgba(84, 184, 123, 1);
    border-radius: 4px;

    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 24px;
    cursor: pointer;
  }
}

.lessonPlan {
  display: flex;
  li {
    width: 48%;
    cursor: pointer;
    border: 1px solid #ccc;
    line-height: 80px;
    text-align: center;
  }
  li:nth-child(2) {
    margin-left: 4%;
  }
}
</style>
